<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>人员信息查询</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="width: 600px; height: 700px; border: 1px solid">
<div>
    <h3 align="center">人员信息查询页面</h3>

    <table border="0" width="300" align="center">
        <tr>
            <td>字段</td>
            <td></td>
            <td>查询字段</td>
        </tr>
        <tr>
            <td width="30%">
                <select multiple="multiple" name="left" id="left" size="7" style="width: 150px" ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
                    <option th:each="column:${columnsList}" th:value="${column.columnName}" th:text="${column.columnComment}"></option>
                </select>
            </td>
            <td width="40%" align="center">
                <button onclick="moveOption(document.getElementById('left'), document.getElementById('right'))">&gt;&gt;</button><br/><br/><br/>
                <button onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">&lt;&lt;</button>
            </td>
            <td width="30%">
                <select multiple="multiple" name="right" id="right" size="7" style="width: 150px" ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))"></select>
            </td>
        </tr>
    </table>



    <button style="margin: 30px 0px 30px 150px" onclick="search()">查询</button>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column">
                <h4>查询结果：</h4>
                <table class="table">
                    <thead>
                    <tr id="userth">
                        <!--<th th:each="column:${columnsList}" th:text="${column.columnComment}"></th>-->
                    </tr>
                    </thead>
                    <tbody id="user">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script th:inline="javascript">

    function moveOption(obj1, obj2) {
        for (var i = obj1.options.length - 1; i >= 0; i--) {
            if(obj1.options[i].selected)
            {
                var opt = new Option(obj1.options[i].text,obj1.options[i].value);
                opt.selected = true;
                obj2.options.add(opt);
                obj1.remove(i);
            }
        }
    }

    function search() {
        var select = document.getElementById('right');
        var options = select.options;
        var arrIds=[];
        var sstr = "";
        $("#userth").html("");
        /* <![CDATA[ */
        for (var i = 0; i < options.length; i++) {
            arrIds.push(options[i].value);
            sstr="<th>"+options[i].text+"</th>";
            $("#userth").append(sstr);
        }
        // var legh=arrIds.length;
        // alert(legh);
        /* ]]> */
        var ids = arrIds.join(",");
        $.ajax({
            url:'/list',
            type:'post',
            dataType:'json',
            data:{ids:ids},
            success:function (data) {
                debugger;
                console.log(data);
                var str="";
                $("#user").html("");
                /* <![CDATA[ */
                for (var i=0; i<data.userList.length; i++) {
                    str="<tr>";

                    for (var j=0; j<data.colList.length; j++) {
                        // var col = data.colList[j];
                        str+="<td>"+data.userList[i][data.colList[j]]+"</td>";
                    }
                    // str+="<td>"+data.userList[i].id+"</td>";


                     str+="</tr>";
                    $("#user").append(str);
                }
                /* ]]> */
            },
            error:function () {
                alert("failure");
            }
        });
    }
</script>
</body>
</html>